<template>
  <view class="canvas-container">
    <canvas class="canvas" v-for="page in pages" :id="'the-canvas' + page" :key="page"></canvas>
  </view>
</template>

<script>
import PDFJS from 'pdfjs-dist';
import workerSrc from 'pdfjs-dist/build/pdf.worker.entry';
PDFJS.workerSrc = workerSrc;

export default {
  name: 'PDFView',
  props: {
    pdfUrl: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      pages: [],
      pdfDoc: '',
    };
  },
  created() {
    this._loadFile(this.pdfUrl);
  },
  methods: {
    _renderPage(num) {
      this.pdfDoc.getPage(num).then((page) => {
        let canvasBox = document.getElementById('the-canvas' + num);
				let canvas = canvasBox.querySelector('canvas');
        var vp = page.getViewport({ scale: 1 });
        let ctx = canvas.getContext('2d');
        let dpr = window.devicePixelRatio || 1;
        let bsr =
          ctx.webkitBackingStorePixelRatio ||
          ctx.mozBackingStorePixelRatio ||
          ctx.msBackingStorePixelRatio ||
          ctx.oBackingStorePixelRatio ||
          ctx.backingStorePixelRatio ||
          1;
        let ratio = 1;
        let viewport = page.getViewport({ scale: window.innerWidth / vp.width });
        ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
        let renderContext = {
          canvasContext: ctx,
          viewport: viewport,
        };
        page.render(renderContext);
        if (this.pages > num) {
          this._renderPage(num + 1);
        }
      });
    },
    _loadFile(url) {
      PDFJS.getDocument(url).promise.then((pdf) => {
        console.log(pdf);
        this.pdfDoc = pdf;
        this.pages = pdf.numPages;
        this.$nextTick(() => {
          this._renderPage(1);
        });
      });
    },
  },
};
</script>

<style lang='scss' scoped>
.canvas-container {
  margin: 0 auto;
	height: 100%;
	overflow: auto;
	.canvas{
		width: 100%;
		height: 100%;
	}
}
</style>
